 <!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="BI system demo">
    <meta name="author" content="Louis">

    <script src="http://172.16.17.100:8081/jquery-3.3.1.min.js"></script>
    <script src="http://172.16.17.100:8081/boostrap/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="http://172.16.17.100:8081/boostrap/css/bootstrap.min.css">

    <title>测试</title>

    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }
    </style>

</head>

<body>
    <div class="container">
            <div class="row">
                <div class="well">
                      <form class="form">
                          <fieldset>
                            <div id="legend" class="">
                              <legend class="">百度地区热点</legend>
                            </div>
                            <div class="form-group">
                                <label class="control-label">地区</label>
                                <div class="controls">
                                    <!-- Inline Radios -->
                                    <label class="form-group">
                                      <input type="radio" value="佛山" name="zone" checked="checked">
                                      佛山
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="广州" name="zone">
                                      广州
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="北京" name="zone">
                                      北京
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="上海" name="zone">
                                      上海
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="杭州" name="zone">
                                      杭州
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="浙江" name="zone">
                                      浙江
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="广西" name="zone">
                                      广西
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="广东" name="zone">
                                      广东
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">主题</label>
                                <div class="controls">
                                    <!-- Inline Radios -->
                                    <label class="form-group">
                                      <input type="radio" value="电影" name="theme" checked="checked">
                                      电影
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="电视剧" name="theme">
                                      电视剧
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="财经人物" name="theme">
                                      财经人物
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="互联网人物" name="theme">
                                      互联网人物
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="美食" name="theme">
                                      美食
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="高校" name="theme">
                                      高校
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="畅销书" name="theme">
                                      畅销书
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="热门" name="theme">
                                      热门
                                    </label>
                                    <label class="form-group">
                                      <input type="radio" value="新词" name="theme">
                                      新词
                                    </label>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                    <button class="btn btn-sm btn-default" onclick="get_data('bar_1')">查看</button>
                    <button class="btn btn-sm btn-default" onclick="get_data('bar_2')">对比</button>
                </div>
            </div>

            <div class="row">
                <div id="bar_1" class="col-md-6"></div>
                <div id="bar_2" class="col-md-6"></div>
            </div>
        <!-- </div> -->
    </div>





<script type="text/javascript">

function get_data(obj_id){
    var values = $('form').serializeArray();

    var getDataURL = "/baidu_zone_range"
    var datas = {}
    values.forEach(function(val,index, arr){
        datas[val.name]= val.value
    })
    // if (obj.id != "all"){
    //     getDataURL += "?type="+obj.id
    // }
     $.ajax({
            url: getDataURL,
            useDefaultXhrHeader: false, //important, otherwise its not working
            type: "GET",
            data: datas,
            //dataType: "json",
            success: function(response, opts) {
            if(response.is_error){
                return
            }

            var data = response.datas[0]
            // 排行榜内容
            var html = '<ul class="list-group">'
            html += '<li class="list-group-item list-group-item-success">'+data.zone+' : '+data.name+'</li>'
            data.ranges.forEach(function(val,index, arr){

                html += '<li class="list-group-item"><span class="badge">'+(index+1)+'</span>'+val.keyword
                html += '<div class="progress"><div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="'+val.percentage+'" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: '+val.percentage+'%;">'+val.searches+'</div></div></li>'
            })

            html += '</ul>'


            //排行榜
            $('#'+obj_id).empty()
            $('#'+obj_id).append(html)

        }
    })
}


</script>
</body>